@import "tailwindcss";
@config "../../tailwind.config.js";




@theme {
    --color-primary-green:#00b388 ;
    --color-primary-yellow: #ffc107;
    --color-primary-red: #dc3545;
}

@utility miaoma-btn-* {
    background-color: --value(--color-primary-*);
}
.miaoma-btn {
@apply bg-zinc-900 text-white rounded-xl px-[10px] py-[5px] hover:bg-zinc-700
}


/* 手动定义响应式容器，从小到大排序（推荐按断点升序排列） */
.wty-container {
  width: 100%; /* 默认占满父容器 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* 可选：添加内边距避免内容贴边 */
  padding-right: 1rem;
}

/* 当屏幕宽度 ≥ 640px（40rem = 640px）时 */
@media (min-width: 38rem) {
  .wty-container {
    max-width: 38rem;
  }
}

/* 当屏幕宽度 ≥ 768px（48rem = 768px）时 */
@media (min-width: 46rem) {
  .wty-container {
    max-width: 46rem;
  }
}

/* 当屏幕宽度 ≥ 1024px（64rem = 1024px）时 */
@media (min-width: 42rem) {
  .wty-container {
    max-width: 42rem;
  }
}

/* 当屏幕宽度 ≥ 1280px（80rem = 1280px）时 */
@media (min-width: 78rem) {
  .wty-container {
    max-width: 78rem;
  }
}

/* 当屏幕宽度 ≥ 1536px（96rem = 1536px）时 */
@media (min-width: 90rem) {
  .wty-container {
    max-width: 90rem;
  }
}